<template>
  <div class="popover">
    <a-popover
      trigger="hover"
      placement="bottomLeft"
      :align="{ offset: [0, -1] }"
      :auto-adjust-overflow="false"
      overlay-class-name="z-10"
      @open-change="onChange($event)"
    >
      <template #content>
        <div class="w-[600px] max-h-[800px] p-3 overflow-auto text-base">
          <div class="flex justify-center items-center text-base">伤病员360度档案</div>
          <a-divider class="mt-3 mb-6" />
          <BaseTitle title="个人信息" />
          <div class="info">
            <div class="flex w-[200px]">
              <LabelValue :width="100" :value="patientInfo?.brName" />
              <LabelValue :width="50" :value="patientInfo?.brXb" />
              <LabelValue :width="100" :value="patientInfo?.brAge ? patientInfo?.brAge : '-'" />
            </div>
            <LabelValue label="出生日期" :width="220" :value="patientInfo?.brBtd" />
            <LabelValue label="民族" :width="180" :value="patientInfo?.brMz" />
          </div>
          <div class="info">
            <LabelValue label="身份证号" :width="420" :value="patientInfo?.brSfz" />
            <LabelValue label="内部通讯" :width="180" />
          </div>
          <div class="info">
            <LabelValue label="人员属性" :width="215" :value="patientInfo?.rysx" />
            <LabelValue label="部职别" :width="210" :value="patientInfo?.brBb" />
            <LabelValue label="入伍日期" :width="180" :value="patientInfo?.brRwny" />
          </div>
          <div class="info">
            <LabelValue label="军种" :width="215" :value="patientInfo?.brJz" />
            <LabelValue label="军衔" :width="210" :value="patientInfo?.brJx" />
            <LabelValue label="部队番号" :width="180" :value="patientInfo?.brBdfh" />
          </div>
          <div class="info">
            <LabelValue label="手机号" :width="215" :value="patientInfo?.brMob" />
            <LabelValue label="户籍" :width="210" :value="patientInfo?.brJg" />
            <LabelValue label="政治面貌" :width="180" :value="patientInfo?.brZzmm" />
          </div>
          <div class="info">
            <LabelValue label="联系人" :width="215" :value="patientInfo?.brLxr" />
            <LabelValue label="联系人关系" :width="210" :value="patientInfo?.brLxrgx" />
            <LabelValue label="联系人电话" :width="180" :value="patientInfo?.brLxrdh" />
          </div>
          <BaseTitle title="健康状况" />
          <div class="info">
            <LabelValue label="身高" :value="patientInfo?.brSg" />
            <LabelValue label="体重" :value="patientInfo?.brTz" />
            <LabelValue label="血型" :value="patientInfo?.brXx" />
            <LabelValue label="RH" :value="patientInfo?.rhxx" />
          </div>
          <div class="info">
            <LabelValue label="既往史" :width="400" :value="patientInfo?.brJws" />
          </div>
          <div class="info">
            <LabelValue label="过敏史" :width="400" :value="patientInfo?.brGms" />
            <!-- <AllergyHistory :width="400" :value="patientInfo?.brGms" :patientInfo="patientInfo" @success="(e) => (patientInfo.brGms = e)" /> -->
          </div>
          <div class="info">
            <LabelValue label="遗传史" :width="400" :value="patientInfo?.brYcs" />
          </div>
          <div class="info">
            <LabelValue label="家族史" :width="400" :value="patientInfo?.brJzs" />
          </div>
          <div class="info">
            <LabelValue label="月经及生育史" :width="400" :value="patientInfo?.brYjsjsys" />
          </div>
          <div class="info">
            <LabelValue label="暴露史" :width="400" :value="patientInfo?.brBls" />
          </div>
          <div class="info">
            <LabelValue label="职业病" :width="400" :value="patientInfo?.brZyb" />
          </div>
          <div class="info">
            <LabelValue label="残疾情况" :width="400" :value="patientInfo?.brCjqk" />
          </div>
          <BaseTitle title="就诊信息" />
          <div>
            <BaseTable column-code="000493" :loading="loading" :scroll="{ x: 400 }" :height="200" :data-source="tableData">
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                  <a-popover trigger="hover" placement="bottomLeft" class="w-[400px]" overlay-class-name="z-10" @open-change="onChangePopover($event, record)">
                    <template #content>
                      <div class="w-[800px]">
                        <BaseTable column-code="000494" :loading="loadingDetail" :scroll="{ x: 500 }" :width="800" :height="200" :data-source="tableDataDetail">
                          <template #bodyCell="{ column: columnChild, record: recordChild }">
                            <template v-if="columnChild.dataIndex === 'yf'">
                              <div>{{ recordChild?.yf?.fyff }}</div>
                            </template>
                            <template v-if="columnChild.dataIndex === 'pl'">
                              <div>{{ recordChild?.pl?.pl }}</div>
                            </template>
                          </template>
                        </BaseTable>
                      </div>
                    </template>
                    <span>
                      <BaseButton type="link" size="small" @click="onClickBook(record)"> 详情 </BaseButton>
                    </span>
                  </a-popover>
                </template>
              </template>
            </BaseTable>
          </div>
        </div>
      </template>
      <span class="cursor-pointer"><slot></slot></span>
    </a-popover>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LabelValue from '@/components/LabelValue'

const props = defineProps({
  patientInfo: {
    type: Object,
    description: '病人信息',
    default: () => ({})
  }
})
const visitRow = ref({})

const onChange = (event) => {
  event && getData()
}
const onChangePopover = async (event, row) => {
  event && (visitRow.value = row)
  event && (await getDataDetail())
}

const { loading, tableData, getData } = useTable({
  url: '/outp/mzdj/getPatientHistoryRegistrationInformationList',
  formatParams: () => {
    return {
      brId: props.patientInfo?.brId
    }
  }
})

const {
  loading: loadingDetail,
  tableData: tableDataDetail,
  getData: getDataDetail
} = useTable({
  url: '/outp/mzys/getPatientPrescriptionList',
  pagination: false,
  formatParams: () => {
    return {
      jzbh: visitRow.value?.jzbh,
      czsfck: 0
    }
  },
  formatResult: (data) => {
    data.forEach((i) => {
      if (i.children.length === 0) {
        i.children = undefined
      }
    })
    return data
  }
})
</script>
<style lang="less" scoped>
.info {
  @apply flex items-center  mb-2;
}
</style>
